<?php
/**
 * Input $my_info : jsonstring about this active user
 */
?>

<div class="chatclient" id="chatclientwrap">

    <!-- OPTION WINDOW -->
    <div class="chatwindowcontainer">
        <div class="chatwindow"  id="chat_option_window">
            <div class="header">
                <span class="item active" id="chat_header_followers" onClick="onFollowersClicked();">Followers</span>
                <span class="item" id="chat_header_followees" onClick="onFolloweesClicked();">Followees</span>
                <span class="item" id="chat_header_options" onClick="onOptionsClicked();">Option</span>
            </div>
            <div class="content">
                <div class="chat_content" id="chat_followers_pane">
                </div>
                <div class="chat_content" id="chat_followees_pane" style="display: none">
                </div>
                <div class="chat_content" id="chat_options_pane" style="display: none">
                    <span id="chat_options_pane_onlineoffline">
                        <div class="clickableitem" onclick="CHAT_CLIENT.sendMyInfoUpdate(null, 0);">
                            Go offline
                        </div>
                        <div class="clickableitem" onclick="CHAT_CLIENT.sendMyInfoUpdate(null, 1);">
                            Go online
                        </div>
                    </span>
                    <span id="chat_options_pane_status">
                        <?php
                            $arr = json_decode($chat_images);
                            foreach($arr as $status_info) {
                        ?>
                        <div class="clickableitem" onclick="CHAT_CLIENT.sendMyInfoUpdate(<?php echo $status_info->id?>,1)">
                            Set status as <?php echo $status_info->name ?>
                            <img src="<?php echo $status_info->icon_link ?>" title="<?php echo $status_info->name ?>" />
                        </div>
                        <?php
                            }
                        ?>
                    </span>
                </div>
                <div class="clickableitem" id="chat_myinfo" style="background: white;">
                    
                </div>
            </div>
        </div>
        <div style="border-bottom: 1px solid #cccccc;" ></div>
        <div class="chatoptionbarcontainer" onClick="toggleVisibility(document.getElementById('chat_option_window'));">
            <div class="chatwindowbar" style="text-align: center">
                <img src="<?php echo URL::site("public/image/chat.png") ?>" style="margin: -4px auto;"/>
            </div>
        </div>
    </div>

    <div class="chatwindowcontainercontainer" id="cwcc">
    </div>
</div>


<script type="text/javascript">
    var CHAT_CLIENT = new ChatClient(<?php echo $chat_images; ?>, '<?php echo URL::site(""); ?>');
    CHAT_CLIENT.init(<?php echo $my_info ?>);

    function toggleStyle(targetId, nonTargetId, targetClass, nonTargetClass) {
        for(key in nonTargetId) {
            div = document.getElementById(nonTargetId[key]);
            div.className = nonTargetClass;
        }
        div = document.getElementById(targetId);
        div.className = targetClass;
    }

    function onFollowersClicked() {
        setVisibileAndHideOther('chat_followers_pane', ['chat_followees_pane', 'chat_options_pane']);
        toggleStyle('chat_header_followers', ['chat_header_followees', 'chat_header_options'], "item active", "item");
    }

    function onFolloweesClicked() {
        setVisibileAndHideOther('chat_followees_pane', ['chat_followers_pane', 'chat_options_pane']);
        toggleStyle('chat_header_followees', ['chat_header_followers', 'chat_header_options'], "item active", "item");
    }

    function onOptionsClicked() {
        setVisibileAndHideOther('chat_options_pane', ['chat_followers_pane', 'chat_followees_pane']);
        toggleStyle('chat_header_options', ['chat_header_followers', 'chat_header_followees'], "item active", "item");
    }

</script>